<template>
  <view class="outBox">
    <u-navbar leftText="预约座位" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '预约座位' }}</text>
      </view>
    </u-navbar>
    <view class="" :style="{
			marginTop:menuHeight + 'px',
		}">
      <view class="bgBox"></view>

      <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop
             object-fit="cover"></video>
      <view class="content">
        <view class="numberItem">
          <view class="img">
            <image :src="`${baseImgUrl}newTable/img4.png`" mode="widthFix"></image>
          </view>
          <view class="numberBox">
            <view class="top">
              <text>男生人数</text>
            </view>
            <view class="number">
              <view class="imgBox" @click="handleDecrease(1)">
                <image :src="`${baseImgUrl}newTable/img6.png`" mode="widthFix"></image>
              </view>
              <view class="text">
                <text>{{ reservationForm.manNum }}</text>
              </view>
              <view class="imgBox" @click="handleIncrease(1)">
                <image :src="`${baseImgUrl}newTable/img5.png`" mode="widthFix"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="numberItem">
          <view class="img">
            <image :src="`${baseImgUrl}newTable/img3.png`" mode="widthFix"></image>
          </view>
          <view class="numberBox">
            <view class="top">
              <text>女生人数</text>
            </view>
            <view class="number">
              <view class="imgBox" @click="handleDecrease(2)">
                <image :src="`${baseImgUrl}newTable/img6.png`" mode="widthFix"></image>
              </view>
              <view class="text">
                <text>{{ reservationForm.womenNum }}</text>
              </view>
              <view class="imgBox" @click="handleIncrease(2)">
                <image :src="`${baseImgUrl}newTable/img5.png`" mode="widthFix"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="inputOut">
          <view class="inputBox">
            <view class="name">
              <text>最高竞价</text>
            </view>
            <view class="value">
              <text>¥{{maxBiddingPrice}}</text>
            </view>
          </view>
          <view class="inputBox">
            <view class="name">
              <text>输入竞价</text>
            </view>
            <view class="value">
				<view class="btns3">
					<view class="btn3" @click="handleSetPrice(68)">+68</view>
					<view class="btn3" @click="handleSetPrice(100)">+100</view>
					<view class="btn3" @click="handleSetPrice(488)">+488</view>
				</view>
				<view class="inputOne">
					<u--input inputAlign="right" type="number" color="#fff" v-model="reservationForm.bindingPrice"
					          placeholder="请输入" border="bottom"></u--input>
				</view>
          
            </view>
          </view>
          <view class="inputBox">
            <view class="name">
              <text>选择座位</text>
            </view>
            <view class="value">
              <view class="tag">
                <text>桌号</text>
              </view>
              <text>{{ tableName }}</text>
            </view>
          </view>
        </view>
        <view class="inputOut">
          <view class="inputBox">
            <view class="name">
              <text>是否接受组局</text>
            </view>
            <view class="value">
              <view class="btns">
                <view class="btnOut" @click="reservationForm.isAccept = false" :class="[!reservationForm.isAccept ? 'btnOut2' : 'btnOut']">
                  <view class="btn">
                    <text>否</text>
                  </view>
                </view>
                <view class="btnOut" @click="reservationForm.isAccept = true" :class="[reservationForm.isAccept ? 'btnOut2' : 'btnOut']">
                  <view class="btn">
                    <text>是</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="btns btns2" @click="handleSuccess">
          <view class="btnOut btnOut2">
            <view class="btn">
              <text>确认</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <lingfeng-timepicker ref="timePop" type="datetime" :minDate="minDate" :maxDate="maxDate"
                         @change="timeChange"></lingfeng-timepicker>

  </view>
</template>

<script>
import {
  getWXStatusHeight
} from '@/utils/index.js'
import {bindingPricePayApi} from "@/api/api";


export default {
  data() {
    return {
      // 胶囊的宽度
      baseImgUrl: this.$baseImgUrl,
      barWidth: 0,
      menuHeight: 0,
      reservationForm: {
        isAccept: false, // 接受组局
        phone: '', // 手机号
        time: '',
        seat: '', // 座位
        manNum: 1, // 男人数量
        womenNum: 1, // 女人数量
        bindingPrice: '', // 竞价
        price:'', // 支付定金
      },
      showTimePicker: false, // 显示时间选择器
      minDate: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        date: new Date().getDate(),
        hour: new Date().getHours()
      },
      maxDate: {
        year: new Date().getFullYear(),
        month: 12,
        date: 31
      },
      // 座位号
      tableName: '',
      // 一口价
      fixedPrice: 0,
      // 座位id
      counterDetailId: '',
      videoUrl: this.$videoUrl,
      // 当前最高竞价
      maxBiddingPrice:0,
      isJoinBidding:false,
      curTable:{},
      // 当亲是否有人竞价
      isExistBidding:false
    }
  },
  onLoad(e) {
    let obj = getWXStatusHeight()
    this.barWidth = obj.barWidth + 3
    this.menuHeight = obj.menuHeight
    this.tableName = e.tableName || '-'
    // 当前最高竞价
    this.maxBiddingPrice = e.maxBiddingPrice || 0
    // 支付押金金
    this.reservationForm.price = e.price
    this.isJoinBidding = e.isJoinBidding
    console.log(e,"e.price")
    this.counterDetailId = e.counterDetailId

    // 是否有人出价
    this.isExistBidding = e.isExistBidding

    this.curTable = uni.getStorageSync('curTable')
  },
  methods: {
	  handleSetPrice(val){
		  if(!this.maxBiddingPrice) return uni.showToast({
		  	title:'当前最高竞价有误'
		  })
		  
		  this.reservationForm.bindingPrice = parseFloat(this.maxBiddingPrice) + parseInt(val)
		  
	  },
    handleDecrease(type) {
      if (type == 1) {
        if (this.reservationForm.manNum == 0) return
        this.reservationForm.manNum -= 1
      } else {
        if (this.reservationForm.womenNum == 0) return
        this.reservationForm.womenNum -= 1
      }
    },
    // 人数增加
    handleIncrease(type) {
      console.log(type, "增加");
      if (type == 1) {
        this.reservationForm.manNum += 1
      } else {
        this.reservationForm.womenNum += 1
      }
    },
    // 发起支付
    async handleSuccess() {
      if (this.validateInput()) {
        uni.setStorageSync('orderInfo', this.reservationForm)
        if (this.isJoinBidding == 1) {
          const data = {
            "counterDetailId": this.curTable.id, //卡台明细id
            "counterNo": this.curTable.counterNo, //卡台编号
            "arriveMaleNum": this.reservationForm.manNum, //到店男性人数
            "arriveFemaleNum": this.reservationForm.womenNum, //到店女性人数
            "isShareTable": this.reservationForm.isAccept, //是否接受组局
            "biddingPrice": this.reservationForm.bindingPrice //竞价金额
          }

          const res = await bindingPricePayApi(data)
          if(res.code == 200){
            this.getnav('paySuc')
          }
        } else {
          this.getnav('waitPay?type=2')
        }
      }
    },
    // 验证输入
    validateInput() {
      if(this.reservationForm.bindingPrice == ''){
        this.$toast("请输入竞价金额")
        return false
      }
      if(parseFloat(this.reservationForm.bindingPrice) < this.maxBiddingPrice){
        this.$toast("竞价金额不能小于【"+ this.maxBiddingPrice + "】")
        return false
      }

      // 判断当前是否有人出价
      // if(this.isExistBidding == 1){
      //   console.log(this.isExistBidding,"this.isExistBidding")
      //   if(parseFloat(this.reservationForm.bindingPrice) < parseFloat(this.maxBiddingPrice) + 488){
      //     this.$toast("加价幅度不能小于【488元】")
      //     return false
      //   }
      // }
      return true
    },
    changeSharing(e) {
      console.log(e, "eee");
    },
    // 选择手机号
    changePhone(e) {
      this.reservationForm.phone = e
    }, // 选择人数
    changePeople(e) {
      this.reservationForm.peopleNum = e
    },
    // 选择时间
    handleTimePicker() {
      this.$refs.timePop.show();
    },
    // 确认选择
    confirmTimePicker() {
      this.showTimePicker = false
    },
    timeChange(e) {
      this.reservationForm.time = e
    }
  }
}
</script>

<style lang="scss" scoped>
.btns{
  display: flex;
  justify-content: space-between;
  .btnOut{
    flex: 1;
    width: 150rpx;
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
    margin-right: 30rpx;
    height: 70rpx;
    &:last-child{
      margin-right: 0;
    }
  }
  .btnOut2{
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
    .btn{
      background: #2cb3af;
    }
  }
  .btn{
    width: 150rpx;
    font-weight: 600;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 70rpx;
    text-align: center;
    border-radius: 64rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;

  }
}

.btns2{
  width: 648rpx;
  margin: 100rpx auto 0;

  .btnOut{
    width: 648rpx;
    margin: 0 auto;
    border-radius: 64rpx;
    line-height: 110rpx;
    height: 110rpx;
  }
  .btn{
    width: 648rpx;
    line-height: 110rpx;
  }
}
.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.myBtn {
  background: linear-gradient(267deg, #CC34B3 0%, #541A66 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  width: 648rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 64rpx auto 0;

  text {
    font-size: 32rpx;
    color: #fff;
  }
}


.inputOut{
  background: rgba(0,0,0,0.22);
  border-radius: 60rpx;
  border: 2rpx solid #21253B;
  backdrop-filter: blur(7px);
  width: 682rpx;
  margin: 0 auto 20rpx;
}

.inputBox {
  height: 112rpx;
  border-bottom: 2rpx solid #21253B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36rpx;
	
	.name{
		width: 180rpx;
	}
  .value {
    display: flex;
    align-items: center;
	.btns3{
		display: flex;
		.btn3{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 40rpx;
			background: rgba(52,145,250,0.16);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			border: 2rpx solid #3491FA;
			font-size: 24rpx;
			color: #3491FA;
			margin-right: 20rpx;
		}
	}
    .tag {
      width: 76rpx;
      height: 40rpx;
      background: #FF9A2E;
      border-radius: 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;

      text {
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 24rpx;
      }
    }

    text {
      color: #fff;
      font-size: 28rpx;
    }
  }

  .name {
    text {
      color: #B3B4C3;
      font-size: 28rpx;
    }
  }
}

.numberItem {
  display: flex;
  width: 682rpx;
  height: 300rpx;
  margin: 0 auto 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 60rpx;
  border: 2rpx solid #162520;
  backdrop-filter: blur(7px);

  .numberBox {

    .top {
      margin-bottom: 18rpx;

      text {
        font-weight: 600;
        font-size: 40rpx;
        color: #FFFFFF;
        line-height: 40rpx;
        margin-bottom: 28rpx;
      }
    }

    .number {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .text {
        width: 120rpx;
        height: 64rpx;
        border-radius: 30rpx;
        border: 2rpx solid #162520;
        margin: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      text {
        text-align: center;
        position: relative;
        z-index: 99;
        font-size: 32rpx;
        font-weight: Bold;
        color: #fff;
      }

      .imgBox {

        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 999;
      }

      .icon1 {
        position: relative;
        z-index: 999;
      }

      .icon2 {
        position: relative;
        z-index: 999;
      }

      image {
        width: 64rpx;
        height: 64rpx;
      }
    }
  }

  .img {
    margin-right: 62rpx;

    image {
      width: 196rpx;
    }
  }
}


.width-20 {
  width: 20rpx;
  height: 20rpx;
}

.content {
  position: relative;
  box-sizing: border-box;
  padding-top: 40rpx;
  z-index: 99;
}

.left-slot {
  color: #fff;
  display: flex;

  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}

.outBox {
  background-color: #21202d;
}
</style>
